<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <!-- <div class="nav-title">风险场景干预指南</div> -->
      <div class="nav-placeholder"></div>
    </div>

    <div class="header">
      <h1 class="title"><span class="title-icon">🔄</span> 危机复盘会议</h1>
      <p class="subtitle">系统回顾、分析与评估危机干预过程，优化未来应对策略</p>
    </div>

    <div class="card">
      <h2 class="card-title">
        <span class="icon">ℹ️</span> 什么是危机干预复盘会？
      </h2>
      <p class="card-content">
        危机干预复盘会是一种在危机事件得到初步控制后，由相关参与人员聚集在一起，系统性地回顾、分析和评估整个干预过程的专业活动。如果你需要预约危机干预复盘会，<span
          class="highlight"
          >请在表格填写后在下方确认预约</span
        >，我们的工作人员将在2日内与你联系并安排危机专家。
      </p>
    </div>

    <div class="card">
      <h2 class="card-title"><span class="icon">📋</span> 复盘会内容</h2>
      <p class="card-content">
        复盘会将包括但不限于：<span class="highlight"
          >案例全过程回顾、案例督导、处理流程优化</span
        >。通过系统分析，帮助团队总结经验教训，改进应对策略，提升未来危机处理能力。
      </p>
      <div class="benefits">
        <div class="benefit-item">全面回顾</div>
        <div class="benefit-item">专家督导</div>
        <div class="benefit-item">流程优化</div>
        <div class="benefit-item">能力提升</div>
      </div>
    </div>

    <!-- 新增的两个按钮 -->
    <div class="button-group">
      <button class="download-btn" @click="goviewWord">
        <span class="btn-icon">📥</span> 下载报告
      </button>
      <button class="email-btn" @click="gosendEmail">
        <span class="btn-icon">✉️</span> 预约危机复盘会议
      </button>
    </div>

    <div class="footer">
      <p>盛心心理 · 专业危机干预服务</p>
    </div>

    <!-- 提交成功弹窗 -->
    <div v-if="showSuccessModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-icon">✅</div>
        <h3 class="modal-title">提交成功</h3>
        <p class="modal-message">
          我们已收到您的复盘会议预约，您的项目经理将与您联系并确认会议时间。
        </p>
        <button class="modal-btn" @click="goBack">返回首页</button>
      </div>
    </div>

    <!-- 邮件提交成功提示 -->
    <div v-if="showEmailSuccess" class="modal-overlay" @click="closeEmailModal">
      <div class="modal-content" @click.stop>
        <div class="modal-icon">✉️</div>
        <h3 class="modal-title">邮件提交成功</h3>
        <p class="modal-message">邮件已成功发送，我们将尽快处理您的请求。</p>
        <button class="modal-btn" @click="closeEmailModal">确定</button>
      </div>
    </div>

    <!-- 暂无报告提示 -->
    <div
      v-if="showNoReportModal"
      class="modal-overlay"
      @click="closeNoReportModal"
    >
      <div class="modal-content" @click.stop>
        <div class="modal-icon">📄</div>
        <h3 class="modal-title">暂无报告</h3>
        <p class="modal-message">
          当前没有可下载的报告，请稍后再试或联系客服。
        </p>
        <button class="modal-btn" @click="closeNoReportModal">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import { viewWord, sendEmail } from "../../api/manager";
export default {
  name: "CrisisReviewMeeting",
  data() {
    return {
      showSuccessModal: false,
      showEmailSuccess: false,
      showNoReportModal: false, // 新增：暂无报告弹窗控制
      id: null,
    };
  },
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
  },
  methods: {
    goviewWord() {
      const data = { id: this.id };
      viewWord(data)
        .then((res) => {
          // 检查res.data是否为空
          if (!res.data) {
            // 如果res.data为空，显示暂无报告提示
            this.showNoReportModal = true;
            console.log("暂无报告可下载");
            return;
          }

          // 如果res.data不为空，执行下载操作
          console.log("Word文档下载成功");

          // 创建下载链接
          const link = document.createElement("a");
          link.href = res.data || "#"; // 使用API返回的URL或占位符
          link.download = "危机复盘会议文档.docx";
          link.click();
        })
        .catch((error) => {
          console.error("下载失败:", error);
          // 下载失败时也可以显示暂无报告提示
          this.showNoReportModal = true;
        });
    },
    gosendEmail() {
      const data = { id: this.id };
      sendEmail(data)
        .then((res) => {
          console.log("邮件发送成功");
          this.showEmailSuccess = true;
        })
        .catch((error) => {
          console.error("邮件发送失败:", error);
          alert("邮件发送失败，请稍后重试");
        });
    },
    handleAppointment() {
      this.showSuccessModal = true;
    },
    closeModal() {
      this.showSuccessModal = false;
    },
    closeEmailModal() {
      this.showEmailSuccess = false;
    },
    // 新增：关闭暂无报告弹窗
    closeNoReportModal() {
      this.showNoReportModal = false;
    },
    goBack() {
      this.$router.go(-2);
    },
  },
};
</script>

<style scoped>
/* 原有的样式保持不变 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  font-family: "楷体", KaiTi, "STKaiti", serif;
  background: linear-gradient(135deg, #e6f0ff 0%, #f2e6ff 100%);
  color: #333;
  line-height: 1.6;
  padding: 20px 15px;
  min-height: 100vh;
  max-width: 600px;
  margin: 0 auto;
}

/* 导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  /* background: white; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.nav-back {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  border: none;
  cursor: pointer;
}

.nav-back:hover {
  background: #eef0ff;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.nav-placeholder {
  width: 40px;
}

.header {
  margin-top: 50px;
  text-align: center;
  margin-bottom: 25px;
  position: relative;
}

.title {
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #4a4a8c;
  margin-bottom: 15px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-icon {
  font-size: 28px;
  margin-right: 10px;
}

.subtitle {
  font-size: 15px;
  color: #666;
  margin-bottom: 20px;
  padding: 0 10px;
}

.card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-title {
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #5a5a9c;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.card-title .icon {
  margin-right: 8px;
  font-size: 20px;
}

.card-content {
  font-size: 15px;
  color: #555;
  text-align: justify;
}

.highlight {
  color: #6a5acd;
  font-weight: bold;
}

.appointment-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #6a5acd, #8a7de3);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 16px;
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 30px 0 20px;
  box-shadow: 0 4px 15px rgba(106, 90, 205, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.appointment-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(106, 90, 205, 0.3);
}

/* 新增按钮组样式 */
.button-group {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.download-btn,
.email-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.download-btn {
  background: linear-gradient(135deg, #4a90e2, #5a9ae3);
  color: white;
}

.email-btn {
  background: linear-gradient(135deg, #34c759, #4cd964);
  color: white;
}

.download-btn:active,
.email-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-icon {
  font-size: 18px;
}

.footer {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 30px;
}

.benefits {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.benefit-item {
  flex: 0 0 23%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  font-size: 14px;
  color: #5a5a9c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 16px;
  padding: 30px 25px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-icon {
  font-size: 50px;
  margin-bottom: 15px;
}

.modal-title {
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #4a4a8c;
  margin-bottom: 15px;
}

.modal-message {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 25px;
}

.modal-btn {
  background: linear-gradient(135deg, #6a5acd, #8a7de3);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(106, 90, 205, 0.3);
}

.modal-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 5px rgba(106, 90, 205, 0.3);
}

@media (max-width: 480px) {
  .title {
    font-size: 22px;
  }

  .card-title {
    font-size: 17px;
  }

  .card-content {
    font-size: 14px;
  }

  .button-group {
    flex-direction: column;
  }

  .download-btn,
  .email-btn {
    width: 100%;
  }

  .benefit-item {
    font-size: 13px;
    padding: 10px 6px;
  }

  .modal-content {
    padding: 25px 20px;
  }

  .modal-title {
    font-size: 20px;
  }

  .modal-message {
    font-size: 15px;
  }
}
</style>
